/*
 * @Author: wanglianxin 532445330@qq.com
 * @Date: 2023-11-07 22:46:07
 * @LastEditors: wanglianxin 532445330@qq.com
 * @LastEditTime: 2023-11-19 22:26:32
 * @FilePath: /src/store/color.ts
 * @Description:
 */
import { defineStore } from "pinia";
import ColorUnit from "../utils/colorUnit.ts";

export const useColorStore = defineStore("color", () => {
  function setThemeColor(colorMap: [], themeType: string): void {
    let _namespace: string = "el";
    colorMap.forEach((colorItem) => {
      setPropertyColor(`--${_namespace}-color-${colorItem[0]}`, colorItem[1]);
      themeColorGradient(
        `--${_namespace}-color-${colorItem[0]}-light-#level#`,
        themeType,
        colorItem[1]
      );
      setPropertyColor(
        `--${_namespace}-color-${colorItem[0]}-dark-2`,
        colorItem[1],
        themeType == "darken" ? "lighten" : "darken"
      );
      // themeColorGradient(
      //   `--${_namespace}-color-${colorItem[0]}-dark-#level#`,
      //   "darken",
      //   colorItem[1]
      // );
    });
  }
  /**
   * 将css3变量设置到document中方便全局调用
   */
  function setPropertyColor(
    varName: string,
    color: string,
    funName?: string,
    level?: number
  ) {
    level = level ? level : 0;
    funName = funName ? funName : "lighten";
    document.documentElement.style.setProperty(
      varName,
      ColorUnit[funName](color, level / 10)
    );
  }

  /**
   * 生成主色的其余渐变色并修改对应CSS3变量值
   */
  function themeColorGradient(
    varName: string,
    funName: string,
    themeColor: string,
    themeLevel?: number[]
  ) {
    themeColor = themeColor ? themeColor : "#409eff";
    themeLevel = themeLevel ? themeLevel : [3, 5, 7, 8, 9];
    themeLevel.forEach(function (level: number) {
      setPropertyColor(
        varName.replace("#level#", level + ""),
        themeColor,
        funName,
        level
      );
    });
  }

  return {
    setThemeColor,
  };
});
